<template>
  <view class="container">
	<view class="top_yan">
		
	</view>
	
	<view class="login">
		<view class="login-test">
			Hello!
		</view>
		<view class="login-content">
			欢迎来到 乐宠生活
		</view>
		<!-- <view class="login-view">
			<u--input
			    placeholder="手机号"
			    border="none"
			    v-model="value"
			    @change="change"
				maxlength='11'
				color="#000000"
				shape="circle"
				fontSize='40rpx'
				:customStyle="{
					backgroundColor:'#000000'
				}"
			  ></u--input>
			  
			  
		</view> -->
		<input type="text" v-model="form.mobile" class="mobile-input" placeholder="手机号码">
		
		<view class="yzm-inputorget">
			<input type="text" v-model="form.code" class="yzm-input" placeholder="验证码">
			<view class="yzm-bt">
				<u-button type="primary" @click="getcode" color="#EB5F3F" :text="bttest" :disabled="disabled" :customStyle="{borderRadius:'30rpx',width: '236rpx',
			height:'93rpx'}"></u-button>
			</view>
			
			
		</view>
		<view class="login-btn">
			<u-button type="primary" @click="login" color="#EB5F3F" text="登录" :customStyle="{borderRadius:'30rpx',width: '560rpx',
			height: '93rpx'}"></u-button>
		</view>
		<view class="login-qx">
			<u-checkbox-group @change="checkboxChange">
				<u-checkbox v-model="checkedqx"  shape="circle" name="1"></u-checkbox>
			</u-checkbox-group>
			<text>我已阅读并同意</text> 
			<text class="login-xy">《宠物家用户协议》</text> 
			<text class="login-xy">《宠物家隐私协议》</text> 
		</view>
		<view class="login-qxcontent">
			未注册宠物家账号的手机号码，登录成功将自动注册宠物家账号
		</view>
	</view>
	
	
  </view>
</template>

<script>
import { sendSmsCode,bindMobile } from "@/api/login/login";

const app = getApp();
export default {
  data() {
    return {
		checkedqx:false,
		timer:null,
      value: '',
      // 商城基本信息
      storeInfo: undefined,
      // 微信小程序登录凭证 (code)
      // 提交到后端，用于换取openid
	  bttest:"获取验证码",
	  times:60,
	  //定时器
	  intetime:null,
	  disabled:false,
      code: "",
	  form:{ 
		  userId:'',
		  mobile:'',
		  code:'',
		  token:'',
		  },
		  serverpass:"",
      list: [
        {
          name: "注册",
          checked: false,
          disabled: false,
        },
      ],
	 rules: {
	  	// 字段名称
	  	mobile: [
	  		{
	  			required: true, 
	  			message: '请输入手机号',
	  			trigger: ['change','blur'],
	  		},
	  		{
	  			// 自定义验证函数，见上说明
	  			validator: (rule, value, callback) => {
	  				// 上面有说，返回true表示校验通过，返回false表示不通过
	  				// this.$u.test.mobile()就是返回true或者false的
	  				return this.$u.test.mobile(value);
	  			},
	  			message: '手机号码不正确',
	  			// 触发器可以同时用blur和change
	  			trigger: ['change','blur'],
	  		}
	  	],
	 	
	 		password: [
	 							{ 
	 								required: true, 
	 								message: '请输入密码', 
	 								// 可以单个或者同时写两个触发验证方式 
	 								trigger: ['change','blur'],
	 							}
	 						]
	 }	
    };
  },

  created() {},
  beforeDestroy() {
 //    console.log("返回了");
	// clearTimeout(this.timer)
 //    if (!uni.getStorageSync("userId")) {
 //      uni.removeStorageSync("userId");
 //      uni.removeStorageSync("mobile");
 //    }
  },
  onLoad() {
	  var sjs=this.randomWord()
	      var datatime = Date.parse(new Date());
	      var tokens=''+sjs+''+datatime
	  		  this.form.token=tokens
	  // 		  this.form.v=uni.getStorageSync("v")
	  this.form.userId=uni.getStorageSync("userId")
	   my.getPhoneNumber({
	        success: (res) => {
	          let encryptedData = res.response;
			  console.log(encryptedData);
	          // my.request({
	          //   //你的服务器地址
	          //   url: 'https://xxxxxxx',
	          //   data: encryptedData,
	          // });
	        },
	        fail: (res) => {
	          console.log(res);
	        },
	      });
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  	onReady() {
  	 		// this.$refs.uForm.setRules(this.rules);
  	 	},
  methods: {
	  checkboxChange(n){
		  console.log(n)
		  if(n.length>0){
			  this.checkedqx=true
		  }else{
			this.checkedqx=false
		  }
	  },
	  randomWord() {
	      var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
	       var nums = "";
	        for (var i = 0; i < 20; i++) {
	        var id = parseInt(Math.random() * 61);
	        nums += chars[id]
	        }
	        return nums; 
	        },
	  async getcode(){
		  var that=this
		  if(!this.form.mobile){
		  			  uni.showToast({
		  			  	icon:"none",
		  				title:"请输入手机号"
		  			  })
		  			  return 
		  }
		  const res= await sendSmsCode({mobile:this.form.mobile})
		  if(res.result==0){
			  this.bttest="60s"
			   this.disabled=true
			  that.times=60
			   that.intetime=setInterval(()=>{
			  				  that.times=that.times-1
			  				  that.bttest=that.times+'s'
			  				  console.log(that.times)
			  				  
			  				  if(that.times<=0){
			  					  clearInterval(that.intetime)
			  					  this.disabled=false
			  					  this.bttest="获取验证码"
			  				  }
			   },1000)
			  uni.showToast({
			  	icon:"none",
			  	title:"发送成功"
			  })
		  }
		  console.log(res)
	  },
	  async login(){
		  var that=this
		  if(!this.form.mobile){
			  uni.showToast({
			  	icon:"none",
				title:"请输入手机号"
			  })
			  return 
		  }
		  if(!this.form.code){
		  			  uni.showToast({
		  			  	icon:"none",
		  				title:"请输入手机验证码"
		  			  })
		  			  return 
		  }
		  if(!this.checkedqx){
			  uni.showToast({
			  	icon:"none",
			  	title:"请阅读和勾选协议"
			  })
			  return
		  }
		  const res= await bindMobile(JSON.stringify(this.form))
		  if(res.result==0){
			  uni.setStorageSync("userMobile",this.form.mobile)
			  uni.showToast({
			  	icon:"none",
			  	title:"授权成功"
			  })
			  setTimeout(()=>{
				  that.handleCancel()
			  },2000)
		  }else{
			  var sjs=that.randomWord()
			      var datatime = Date.parse(new Date());
			      var tokens=''+sjs+''+datatime
			  		  that.form.token=tokens
		  }
		  console.log(res)
		  
	  },
	  handleCancel() {
	  		  // return
	   // if(getCurrentPages().length==1){
	   // 	wx.redirectTo({
	   // 	  url: '/pages/index/index'
	   // 	})
	   // }else{
	   	// 跳转回原页面
	   	uni.navigateBack({
	   	  delta: 1,
	   	});
	   // }
	  },
	  
	   
  },
};
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		height: 100vh;
		position: relative;
	}
.top_k{
	position: absolute;
	top: 312rpx;
	left: 0;
	width: 100%;
	height: 500rpx;
	// border-bottom: 250rpx solid rgba(255,255,255,0.1);
	// background-color: white;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
	opacity: 1;
	box-shadow: 0 10px 20px 0px #C2C2C2;
	clip:rect(250rpx,800rpx,800rpx,0rpx);

	
}
.top_yan{
	position: absolute;
	top: 0;
	left: 0;
	width: 748rpx;
	height: 588rpx;
	background: linear-gradient(360deg, rgba(255,255,255,0.1) 3%, rgba(243,182,168,0.1) 16%, #EB5F3F 100%);
	opacity: 1;
}


.login{
	position: relative;
	z-index: 10;
	width: 664rpx;
	height: 741rpx;
	background: #FFFFFF;
	opacity: 1;
	margin: 0 auto;
	top: 139rpx;
	border-radius: 45rpx;
	padding-top: 67rpx;
	padding-bottom: 72rpx;
	
	.login-test{
		margin-left: 55rpx;
		font-size: 82rpx;
		color: #040000;
		line-height: 115rpx;
	}
		
	.login-content{
		margin-left: 55rpx;
		font-size: 27rpx;
		color: #040000;
		line-height: 38rpx;
	}
	.login-view{
		width: 560rpx;
		height: 93rpx;
		background: #EDF0F3;
		
		opacity: 1;
	}
	.mobile-input{
		margin-top: 26rpx;
		margin-left: 50rpx;
		width: 560rpx;
		height: 93rpx;
		background: #EDF0F3;
		border-radius: 30rpx;
		opacity: 1;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 30rpx;
	}
	.yzm-inputorget{
		display: flex;
		align-items: center;
		margin-top: 46rpx;
		margin-left: 50rpx;
		
	}
	.yzm-input{
		width: 302rpx;
		height: 93rpx;
		background: #EDF0F3;
		border-radius: 30rpx;
		opacity: 1;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 30rpx;
	}
		
	.yzm-bt{
			
	
		width: 236rpx;
		height: 93rpx;
		margin-left: 21rpx;
		
	}
	.login-btn{
		margin-top: 33rpx;
		margin-left: 50rpx;
		width: 560rpx;
		height: 93rpx;
		opacity: 1;
	}
	.login-qx{
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		font-size: 18rpx;
		color: #606060;
		line-height: 25rpx;
		text-align: center;
		justify-content: center;
		.login-xy{
			color: #EB5F3F;
		}
	}
		
	.login-qxcontent{
		text-align: center;
		font-size: 18rpx;
		color: #606060;
		line-height: 25rpx;
	}
}



</style>
